/* eslint-disable max-len */
import React, { useState } from 'react';
import { Button, Search, Grid, Dialog } from '@alifd/next';
import { Observer } from 'mobx-react-lite';
import DataForm from './DataForm';
import { useStore } from '@/hooks';

const { Row, Col } = Grid;

const ActionPanel = () => {
  const { dictStore: store } = useStore();
  const [adding, setAdding] = useState(false);
  const onSearch = () => {
    store.fetch();
  };

  return (
    <Row>
      <Col span={16}>
        <Button type="primary" onClick={() => setAdding(true)} >添加字典</Button>
      </Col>
      <Col span={8} style={{ textAlign: 'right' }}>
        <Observer>{() => <Search shape="simple" type="normal" value={store.keyword} onChange={(t) => store.setKeyword(t)} onSearch={onSearch} />}</Observer>
      </Col>
      <Dialog className="tau-ui-dialog" title={i18n.t('添加字典')} visible={adding} footer={false}>
        <DataForm onSubmit={() => setAdding(false)} onCancel={() => setAdding(false)} />
      </Dialog>
    </Row>
  );
};

export default ActionPanel;
